@import './variables.less';
@import '../assets/din/index.less';

.clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// 解决全屏幕机型底部适配问题
.safe-area-padding-bottom() {
  padding-bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom) !important; /* 兼容 iOS >= 11.2 */
}

.safe-area-margin-bottom() {
  margin-bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
  margin-bottom: env(safe-area-inset-bottom) !important; /* 兼容 iOS >= 11.2 */
}

.ellipsis-muti(@num) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
}

.ellipsis-two {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ellipsis-one {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
}


.hairline() {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  pointer-events: none;
  content: '';
  border: 0 solid @border-color-split;
  transform: scale(0.5);
  transform-origin: 0 0;
}

.top-1px() {
  position: relative;
  &:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    color: @border-color;
    content: ' ';
    border-top: 1rpx solid @border-color;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }
}

.bottom-1px() {
  position: relative;
  &:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    color: @border-color;
    content: ' ';
    border-bottom: 1rpx solid @border-color;
    transform: scaleY(0.5);
    transform-origin: 0 100%;
  }
}

.left-1px() {
  position: relative;
  &:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    color: @border-color;
    content: ' ';
    border-left: 1rpx solid @border-color;
    transform: scaleX(0.5);
    transform-origin: 0 0;
  }
}

.right-1px() {
  position: relative;
  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    color: @border-color;
    content: ' ';
    border-right: 1rpx solid @border-color;
    transform: scaleX(0.5);
    transform-origin: 100% 100%;
  }
}
